<template>
  <div class="container index ">
    <swiper :autoplay="{ delay: 5000, disableOnInteraction: true }" :modules="modules" :loop="true">
      <swiper-slide v-for="(item, index) in data.topSlide" :key="String(index)">
        <div class="headBox">
          <div class="bg" :style="{backgroundImage: `url(${item.pic_url})`}"></div>
          <div class="body flex-y flex-y-center flex-x-center">
            <div class="col-f  txt1 animate__animated animate__fadeInUp">{{item.title}}</div>
            <div class="txt2  col-f animate__animated animate__fadeInUp">{{item.brief}}</div>
            <div class="bottomLine mb-60 animate__animated animate__zoomIn"></div>
            <div class="button-container animate__animated animate__zoomIn">
              <button class="glow-button" style="--btn-color: #ffffff;" @click="scrollToNext">
                了解更多>>
              </button>
            </div>

          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="bodyBox" v-loading="isLoading">
      <div class=" wrapBox">
        <el-row :gutter="24" v-for="item in newListData">
          <el-col :span="8" :xs="24" v-for="itemf in item">
            <NuxtLink :to="{path: `/article/${itemf.article_id}`}" class="item cursor" :key="itemf.article_id" v-slide>
              <div class="imgBox">
                <img class="img" :src="itemf.image_url" />
              </div>
              <div class="bottom b-f">
                <div class="txt1  t-c oneline-hide">{{itemf.title}}</div>
                <div class="txt2  t-c threeline-hide"> {{itemf.brief}}</div>
              </div>
            </NuxtLink>

          </el-col>

        </el-row>
        <div class="paginationBox p-20 dis-flex flex-x-end">
          <ClientOnly>
            <pagination :total="list.last_page" :page-num="queryParams.page" :page-size="queryParams.limit" @changePage="changePage" />
          </ClientOnly>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import "swiper/css";
import 'swiper/css/pagination'
import { Autoplay} from 'swiper/modules';
 const modules = [Autoplay];
import serverRequest from '~/composables/useServerRequest';
import clientRequest from '~/composables/useClientRequest';
import { getDimensionaArr } from "@/utils/tool";
import Pagination from "@/components/pagination";

const data = await serverRequest.get('service/index');
/**
 * 头部设置
 */
 const keywords = computed(() => {
  const topSlide = data.topSlide
  const newKeywords =  data.topSlide.map(item => item.title).join(',')
  return newKeywords
});

const description = computed(() => {
  const topSlide = data.topSlide
  const newDescription =  data.topSlide.map(item => item.brief).join(',')
  return newDescription
});
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk}-服务` : '红河大成房地产';
  },
  meta: [
    { name: 'keyword', content: keywords },
    { name: 'description', content:description }
  ]
})

const newListData = computed(() => {
  const newListData = pageData.list.data
 
  return getDimensionaArr(newListData,3);
});
const pageData = reactive({
 queryParams:{
  page: 1,
  limit: 20
 },
 list:{

 },
 isLoading:false
});
const { queryParams,isLoading ,list} = toRefs(pageData);
const listData  = await serverRequest.get('service/lists',pageData.queryParams);
pageData.list = listData.list
const scrollDisabled = computed(() => pageData.list.data.length >= pageData.list.total) 
 //碰底加载
const handleInfiniteOnLoad = () => { 
        // 异步加载数据等逻辑 
        if (scrollDisabled.value) { 
            // 数据加载完毕 
        } else { 
          pageData.queryParams.page += 1
          getList()
        } 
    } 
/**
 * 获取分页列表
 */
 async function getList() {
  
  pageData.isLoading = true;
  clientRequest.get('service/lists',pageData.queryParams)
    .then((res) => {
      pageData.list = res.data.list;
    })
    .finally(() => {
      pageData.isLoading = false;
    });
}
/**
 * 更改页码
 * @param val
 */
 function changePage(val) {
  console.log(val)
  pageData.queryParams.page = val.pageNum;
  pageData.queryParams.limit = val.pageSize;
  getList();
}
// 滚动区域的引用
function scrollToNext(){
  window.scrollTo({ top: window.innerHeight - 90, behavior: 'smooth' });
}
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
